import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import Avatar from '../components/Avatar';

interface Message {
  id: number;
  type: 'comment' | 'like' | 'follow' | 'mention';
  content: string;
  fromUser: {
    id: number;
    username: string;
    avatar?: string;
  };
  videoId?: number;
  videoTitle?: string;
  createdAt: string;
  isRead: boolean;
}

const Messages: React.FC = () => {
  const [messages, setMessages] = useState<Message[]>([]);
  const [loading, setLoading] = useState(true);
  const [activeTab, setActiveTab] = useState<'all' | 'comment' | 'like' | 'follow'>('all');

  useEffect(() => {
    fetchMessages();
  }, []);

  const fetchMessages = async () => {
    try {
      setLoading(true);
      // 模拟消息数据
      const mockMessages: Message[] = [
        {
          id: 1,
          type: 'comment',
          content: '评论了你的视频',
          fromUser: { id: 1, username: '用户A' },
          videoId: 1,
          videoTitle: '我的第一个视频',
          createdAt: '2024-01-15T10:30:00Z',
          isRead: false
        },
        {
          id: 2,
          type: 'like',
          content: '点赞了你的视频',
          fromUser: { id: 2, username: '用户B' },
          videoId: 1,
          videoTitle: '我的第一个视频',
          createdAt: '2024-01-15T09:15:00Z',
          isRead: false
        },
        {
          id: 3,
          type: 'follow',
          content: '关注了你',
          fromUser: { id: 3, username: '用户C' },
          createdAt: '2024-01-15T08:45:00Z',
          isRead: true
        },
        {
          id: 4,
          type: 'mention',
          content: '在评论中提到了你',
          fromUser: { id: 4, username: '用户D' },
          videoId: 2,
          videoTitle: '有趣的视频',
          createdAt: '2024-01-14T16:20:00Z',
          isRead: true
        }
      ];
      
      setMessages(mockMessages);
    } catch (error) {
      console.error('获取消息失败:', error);
    } finally {
      setLoading(false);
    }
  };

  const markAsRead = (messageId: number) => {
    setMessages(prev => prev.map(msg => 
      msg.id === messageId ? { ...msg, isRead: true } : msg
    ));
  };

  const getMessageIcon = (type: string) => {
    switch (type) {
      case 'comment':
        return (
          <svg className="w-5 h-5 text-blue-500" fill="currentColor" viewBox="0 0 24 24">
            <path d="M21.99 4c0-1.1-.89-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4-.01-18z"/>
          </svg>
        );
      case 'like':
        return (
          <svg className="w-5 h-5 text-red-500" fill="currentColor" viewBox="0 0 24 24">
            <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
          </svg>
        );
      case 'follow':
        return (
          <svg className="w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 24 24">
            <path d="M16 4c0-1.11.89-2 2-2s2 .89 2 2-.89 2-2 2-2-.89-2-2zm4 18v-6h2.5l-2.54-7.63A1.5 1.5 0 0 0 18.54 8H17c-.8 0-1.54.37-2.01 1l-1.7 2.26V9H9v13h6v-5h1.5l1.5 5h2z"/>
          </svg>
        );
      case 'mention':
        return (
          <svg className="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 24 24">
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
          </svg>
        );
      default:
        return null;
    }
  };

  const getMessageText = (message: Message) => {
    switch (message.type) {
      case 'comment':
        return `${message.fromUser.username} 评论了你的视频 "${message.videoTitle}"`;
      case 'like':
        return `${message.fromUser.username} 点赞了你的视频 "${message.videoTitle}"`;
      case 'follow':
        return `${message.fromUser.username} 关注了你`;
      case 'mention':
        return `${message.fromUser.username} 在评论中提到了你`;
      default:
        return message.content;
    }
  };

  const filteredMessages = messages.filter(message => {
    if (activeTab === 'all') return true;
    return message.type === activeTab;
  });

  if (loading) {
    return (
      <div className="h-screen bg-black flex items-center justify-center">
        <div className="text-white text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-white mx-auto mb-4"></div>
          <p>加载中...</p>
        </div>
      </div>
    );
  }

  return (
    <div className="h-screen bg-black flex flex-col">
      {/* 顶部导航 */}
      <div className="flex items-center justify-between p-4 border-b border-gray-800">
        <h1 className="text-white text-lg font-bold">消息</h1>
        <button className="text-gray-400">
          <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
          </svg>
        </button>
      </div>

      {/* 标签页 */}
      <div className="flex border-b border-gray-800">
        {[
          { key: 'all', label: '全部', count: messages.length },
          { key: 'comment', label: '评论', count: messages.filter(m => m.type === 'comment').length },
          { key: 'like', label: '点赞', count: messages.filter(m => m.type === 'like').length },
          { key: 'follow', label: '关注', count: messages.filter(m => m.type === 'follow').length }
        ].map(tab => (
          <button
            key={tab.key}
            onClick={() => setActiveTab(tab.key as any)}
            className={`flex-1 py-3 text-sm font-medium ${
              activeTab === tab.key 
                ? 'text-white border-b-2 border-red-500' 
                : 'text-gray-400'
            }`}
          >
            {tab.label}
            {tab.count > 0 && (
              <span className="ml-1 bg-gray-700 text-white text-xs px-1.5 py-0.5 rounded-full">
                {tab.count}
              </span>
            )}
          </button>
        ))}
      </div>

      {/* 消息列表 */}
      <div className="flex-1 overflow-y-auto">
        {filteredMessages.length === 0 ? (
          <div className="flex items-center justify-center h-full">
            <div className="text-white text-center">
              <div className="text-6xl mb-4">💬</div>
              <h3 className="text-xl font-medium mb-2">暂无消息</h3>
              <p className="text-gray-400 mb-4">还没有收到任何消息</p>
              <Link to="/" className="bg-white text-black px-6 py-3 rounded">
                去发现更多内容
              </Link>
            </div>
          </div>
        ) : (
          <div className="p-4 space-y-4">
            {filteredMessages.map(message => (
              <div
                key={message.id}
                className={`flex items-start space-x-3 p-3 rounded-lg ${
                  message.isRead ? 'bg-gray-900' : 'bg-gray-800'
                }`}
                onClick={() => markAsRead(message.id)}
              >
                {/* 未读指示器 */}
                {!message.isRead && (
                  <div className="w-2 h-2 bg-red-500 rounded-full mt-2"></div>
                )}
                
                {/* 用户头像 */}
                <Avatar
                  user={{
                    id: message.fromUser.id,
                    username: message.fromUser.username,
                    email: '',
                    avatar: message.fromUser.avatar,
                    bio: '',
                    createdAt: message.createdAt,
                    updatedAt: message.createdAt
                  }}
                  size="sm"
                />
                
                {/* 消息内容 */}
                <div className="flex-1 min-w-0">
                  <div className="flex items-center space-x-2">
                    {getMessageIcon(message.type)}
                    <p className="text-white text-sm">
                      {getMessageText(message)}
                    </p>
                  </div>
                  
                  {message.videoTitle && (
                    <p className="text-gray-400 text-xs mt-1">
                      视频: {message.videoTitle}
                    </p>
                  )}
                  
                  <p className="text-gray-500 text-xs mt-1">
                    {new Date(message.createdAt).toLocaleString()}
                  </p>
                </div>
                
                {/* 操作按钮 */}
                <div className="flex flex-col space-y-2">
                  {message.type === 'comment' && (
                    <button className="text-blue-500 text-xs hover:text-blue-400">
                      回复
                    </button>
                  )}
                  {message.type === 'follow' && (
                    <button className="text-red-500 text-xs hover:text-red-400">
                      回关
                    </button>
                  )}
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
};

export default Messages; 